<template>
  <div class="content">
    <div class="gltzDiv">
      <TitleVue :name="'管理体制'" />
      <div class="gltzContent">
        <div class="itemDiv" v-for="(item, index) in gltzList" :key="index">
          <div class="titleDiv">
            {{ item.name }}
          </div>
          <div class="contentDiv">
            <p :title="item.content1">{{ item.content1 }}</p>
            {{ item.content2 }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TitleVue from '../common/titleVue.vue'

export default {
  name: 'FzLeft',
  components: {
    TitleVue
  },
  data() {
    return {
      gltzList: [
        {
          name: '标准',
          content1: '水库工程管理设计规范（2017年发布）',
          content2: '为规范水库工程管理设计，提升水库工程管理水平，制定本标准。本标准适用于新建大、中型水库工程管理设计。'
        },
        {
          name: '标准',
          content1: '水库大坝安全评价导则（2017年实施）',
          content2:
            '为做好水库大坝安全鉴定工作，规范其技术工作的内容、方法及标准(准则)，制定本标准。本标准适用于坝高15m及以上或库容100万m及以上的已建水库大坝安全评价，坝高小于15m的小(2)型已建水库大坝可参照执行。'
        },
        {
          name: '标准',
          content1: '水库大坝安全管理应急预案编制导则（2015年实施）',
          content2: '为规范和指导水库大坝安全管理应急预案(以下简称预案)编制工作，提高应对水库大坝突发事件能力，依据《中华人民共和国突发事件应对法》和《水库大坝安全管理条例》等法律法规，制定本标准。'
        },
        {
          name: '法规',
          content1: '水库大坝安全管理条例（2018年修正）',
          content2: '为加强水库大坝安全管理，保障人民生命财产和社会主义建设的安全，根据《中华人民共和国水法》，制定本条例。'
        },
        {
          name: '法规',
          content1: '中华人民共和国防汛条例（2011年修正）',
          content2: '为了做好防汛抗洪工作，保障人民生命财产安全和经济建设的顺利进行，根据《中华人民共和国水法》，制定本条例。'
        },
        {
          name: '法律',
          content1: '中华人民共和国防洪法（2016年修正）',
          content2: '为了防治洪水，防御、减轻洪涝灾害，维护人民的生命和财产安全，保障社会主义现代化建设顺利进行，制定本法。防洪工作实行全面规划、统筹兼顾、预防为综合治理、局部利益服从全局利益的原则。'
        }
      ]
    }
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  .gltzDiv {
    width: 100%;
    height: 100%;
    padding: 0 5px;
    box-sizing: border-box;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .gltzContent::-webkit-scrollbar {
      display: none;
    }
    .gltzContent {
      flex: 1;
      overflow-y: auto;
      padding: 0 1vw 1vh;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;

      .itemDiv {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        .titleDiv {
          width: 100%;
          background: url('@/assets/img/common/zmjkTitle.png') no-repeat;
          background-size: 100% 100%;
          font-family: Source Han Sans CN;
          // font-weight: bold;
          font-size: 1.7vh;
          color: #ffffff;
          padding-left: 1vw;
          box-sizing: border-box;
          margin-bottom: 3px;
        }
        .contentDiv {
          width: 100%;
          height: auto;
          background-color: rgb(18 61 101 / 50%);
          font-family: Source Han Sans CN;
          font-weight: 300;
          color: #ffffff;
          font-size: 1.5vh;
          padding: 1vh 1vh 1vh 2vh;
          box-sizing: border-box;
          p:nth-child(1) {
            width: 100%;
            font-size: 1.9vh;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
</style>
